<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<meta name="screen-orientation" content="portrait" />
		<meta name="x5-orientation" content="portrait" />
		<meta name="format-detection" content="telephone=no" />
		<meta name="msapplication-tap-highlight" content="no" />
		<link rel="stylesheet" href="../js/plugins/element-ui/element-ui.css">
		<style>
			body {
				background: #00625A;
				font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
			}
			
			.el-row {
				margin-bottom: 20px;
				&:last-child {
					margin-bottom: 0;
				}
			}
			
			.login-box {
				/*box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);*/
				-webkit-border-radius: 5px;
				border-radius: 5px;
				-moz-border-radius: 5px;
				background-clip: padding-box;
				margin: 20% auto;
				width: 350px;
				padding: 35px 35px 15px 35px;
				background: #fff;
				border: 1px solid #eaeaea;
				box-shadow: 0 0 5px #cac6c6;
				.title {
					margin: 0px auto 40px auto;
					text-align: center;
					color: #505458;
				}
				.remember {
					margin: 0px 0px 35px 0px;
				}
			}
		</style>
	</head>

	<body>
		<div class="login-box" id="login">
			<el-row>
				<el-col :span="24">
					<div>贵州绿建云后台</div>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="24">
					<el-input id="name" v-model="name" placeholder="请输入帐号">
						<template slot="prepend">帐号</template>
					</el-input>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="24">
					<el-input id="password" v-model="password" type="password" placeholder="请输入密码">
						<template slot="prepend">密码</template>
					</el-input>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="24">
					<el-checkbox checked class="remember">记住密码</el-checkbox>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="24">
					<el-button id="login" v-on:click="check" style="width:100%" type="primary">登录</el-button>
				</el-col>
			</el-row>
		</div>
		<script type="text/javascript" src="../js/plugins/vue/vue.js"></script>
		<script type="text/javascript" src="../js/plugins/element-ui/element-ui.js"></script>
		<script type="text/javascript" src="../js/plugins/jQuery/jquery-3.1.1.min.js"></script>
	</body>

	<script type="text/javascript">
		new Vue({
			el: '#login',
			data: {
				name: '',
				password: ''
			},
			methods: {
				check: function(event) {
					//获取值  
					var name = this.name;
					var password = this.password;
					if(name == '' || password == '') {
						this.$message({
							message: '账号或密码为空！',
							type: 'error'
						})
						return;
					}
					window.location.href = 'main.html';
					//					$.ajax({
					//						url: 'login',
					//						type: 'post',
					//						data: {
					//							name: name,
					//							password: password
					//						},
					//						success: function(data) {
					//							var result = data.result;
					//							if(result == 'true' || result == true) {
					//								alert("登录成功");
					//							} else {
					//								alert("登录失败");
					//							}
					//						},
					//						error: function(data) {
					//							alert(data);
					//						},
					//						dataType: 'json',
					//					})
				}
			}
		})
	</script>

</html>